<template>
  <hf-table
    :isRowEditable="true"
    :data="tableData"
    :options="options"
    @cellChanged="cellChanged"
    @rowChanged="rowChanged"
    @rowDeleted="rowDeleted"
    pagination
    @pageSizeChanged="sizeChanged"
    @currentPageChanged="currentChanged"
    :total="total"
    :pageSize="50"
  >
    <!-- 右侧操作列
  {
    // 操作项(编辑/删除)
    label: '操作',
    action: true,
    width: '134px',
  }, -->
    <template #action="{scope}">
      操作列
    </template>
    <!-- 个性化列显示
    useSlot: true 插槽名与 prop 相同 -->
    <template #date="{scope}">
      <!-- 增加时钟图标 -->
      <el-icon-timer />
      {{ scope.row.date }}
    </template>
    <!-- 自定义 prop == 'name' 列 -->
    <template #name="{scope}">
      <!-- 增加弹窗信息提示 -->
      <el-popover placement="top" width="200" trigger="click">
        <!-- default 插槽显示提示内容 -->
        <template #default>
          <p>{{ scope.row.date }}</p>
          <p>{{ scope.row.city }}@{{ scope.row.state }}</p>
        </template>
        <template #reference>
          <!-- reference 插槽显示列内容 -->
          <el-button type="text">
            {{ scope.row.name }}
          </el-button>
        </template>
      </el-popover>
    </template>
  </hf-table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TableOptions } from '../components/table/types'

// 分页功能
let total = ref(100)
let currentChanged = (vol: number) => {
  console.log('当前页: ', vol)
}
let sizeChanged = (vol: number) => {
  console.log('页行数: ', vol)
  total.value = 50 // 测试父组件修改 total 的效果
}

// 单元格编辑后事件
let cellChanged = (scope: any) => {
  console.log('单元格编辑后: ', scope)
}
// 行编辑
let rowChanged = (scope: any) => {
  console.log('行编辑: ', scope.$index, '\t内容: ', scope.row)
}
// 行删除
let rowDeleted = (scope: any) => {
  console.log('删除行: ', scope.$index)
}
// 演示加载中...
// let tableData = null
// 正常数据
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
]

// 插槽示例
let options: TableOptions[] = [
  {
    label: '日期',
    prop: 'date',
    align: 'center',
    useSlot: true,
    width: 200,
    editable: true,
  },
  {
    label: '姓名',
    prop: 'name',
    align: 'center',
    useSlot: true,
  },
  {
    label: '国家',
    prop: 'state',
    align: 'center',
    editable: true,
  },
  {
    label: '城市',
    prop: 'city',
    align: 'center',
  },
  {
    // 操作项(编辑/删除)
    label: '操作',
    prop: 'action',
    action: true,
    width: '134px',
  },
]
</script>

<style lang="scss" scoped>
svg {
  height: 1em;
  width: 1em;
}
</style>
